<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
	<video width="640" height="480" id="myVideo"></video>
	<canvas width="640" height="480" id="myCanvas"></canvas>
	<button id="myButton">拍摄</button>
	<button id="myButton2">预览</button>
	<button id="myButton3">
		<a download="video.png">另存为</a>
	</button>
</body>
<script>
	window
			.addEventListener(
					'DOMContentLoaded',
					function() {
						var cobj = document.getElementById('myCanvas')
								.getContext('2d');
						var vobj = document.getElementById('myVideo');
						getUserMedia({
							video : true
						}, function(stream) {
							vobj.src = stream;
							vobj.play();
						}, function() {
						});
						document
								.getElementById('myButton')
								.addEventListener(
										'click',
										function() {
											cobj
													.drawImage(vobj, 0, 0, 640,
															480);
											document
													.getElementById('myButton3').children[0].href = cobj.canvas
													.toDataURL("image/png");
										}, false);
						document.getElementById('myButton2').addEventListener(
								'click',
								function() {
									window.open(cobj.canvas
											.toDataURL("image/png"), '_blank');
								}, false);
					}, false);
	function getUserMedia(obj, success, error) {
		if (navigator.getUserMedia) {
			getUserMedia = function(obj, success, error) {
				navigator.getUserMedia(obj, function(stream) {
					success(stream);
				}, error);
			}
		} else if (navigator.webkitGetUserMedia) {
			getUserMedia = function(obj, success, error) {
				navigator.webkitGetUserMedia(obj, function(stream) {
					var _URL = window.URL || window.webkitURL;
					success(_URL.createObjectURL(stream));
				}, error);
			}
		} else if (navigator.mozGetUserMedia) {
			getUserMedia = function(obj, success, error) {
				navigator.mozGetUserMedia(obj, function(stream) {
					success(window.URL.createObjectURL(stream));
				}, error);
			}
		} else {
			return false;
		}
		return getUserMedia(obj, success, error);
	}
</script>
</html>